{% extends 'html/all.html' %}
{% block title %}
    发货管理
{% endblock %}
{% block content %}
    <div class="container my-4">
        <h1 class="mb-4">发货管理</h1>
        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col">商品ID</th>
                <th scope="col">商品名称</th>
                <th scope="col">商品图片</th>
                <th scope="col">预订人</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody id="product-list">
            <!-- 商品列表将通过JavaScript动态生成 -->
            </tbody>
        </table>
    </div>
{% endblock %}

{% block scripts %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $(document).ready(function () {
                $.ajax({
                    url: '/api/shipments',
                    type: 'GET',
                    success: function (response) {
                        if (response.data.code === 200) {
                            var productList = $('#product-list');
                            response.data.products.forEach((item) => {
                                var row = $(
                                    `<tr>
                                          <td>${item.ProductID}</td>
                                          <td>${item.ProductName}</td>
                                          <td><img src="${item.ImageURL}" alt="${item.ProductName}" width="100"></td>
                                          <td>${item.who_buy}</td>
                                          <td>
                                              ${item.IsSold ? '<span>已售</span>' : ''}
                                              <button class="btn btn-success" ${item.success_shipments ? 'disabled' : ''}>${item.success_shipments ? '已发货' : '发货'}</button>
                                              <button class="btn btn-warning cancel-shipment" ${item.success_shipments ? 'disabled' : ''}>取消发货</button>
                                              <a class="btn btn-primary" href="/details?id=${item.ProductID}">查看详情</a>
                                          </td>
                                      </tr>`
                                );
                                row.find('.cancel-shipment').click(function () {
                                    $.ajax({
                                        url: '/api/dont_shipments',
                                        type: 'POST',
                                        contentType: 'application/json',  // 指定内容类型为 JSON
                                        data: JSON.stringify({product_id: item.ProductID}),  // 将数据转换为 JSON 格式
                                        success: function (response) {
                                            if (response.data.code === 200) {
                                                alert('取消发货成功');
                                                location.reload();
                                            } else {
                                                alert('取消发货失败: ' + response.data.msg);
                                            }
                                        },
                                        error: function (xhr, status, error) {
                                            alert('AJAX 请求失败: ' + error);
                                        }
                                    });
                                });
                                row.find('.btn-success').click(function () {
                                    var confirmation = confirm('请确认信息：商品ID：' + item.ProductID + '，商品名字：' + item.ProductName + '，预定人：' + item.who_buy);
                                    if (confirmation) {
                                        $.ajax({
                                            url: '/api/success_shipments',
                                            type: 'POST',
                                            contentType: 'application/json',
                                            data: JSON.stringify({product_id: item.ProductID}),
                                            success: function (response) {
                                                if (response.data.code === 200) {
                                                    alert('已发货成功');
                                                    location.reload();
                                                } else {
                                                    alert('已发货失败: ' + response.data.msg);
                                                }
                                            },
                                            error: function (xhr, status, error) {
                                                alert('AJAX 请求失败: ' + error);
                                            }
                                        });
                                    }
                                });
                                productList.append(row);
                            });
                        } else {
                            console.error('加载商品失败:', response.data.msg);
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('AJAX 请求失败:', error);
                    }
                });
            });
        });
    </script>
{% endblock %}